<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    计算属性：

      语法
        computed: {
          key1() {

          },

          key2: {
            get() {

            },

            set() {

            }
          }
        }

      概念：
        1. 如果需要基于现有的数据二次计算得到一个新的数据，就可以使用计算属性
        2. 所基于的数据就是当前计算属性的依赖项
        3. 依赖项发生变化，计算属性的 get 函数会再次执行，从而得到一份新的数据，
          如果依赖项没有发生变化的话，数据是缓存的。

      特点：
        1. 计算属性能实现的，方法都能实现，但是计算属性相比较方法来说更合适，有缓存这个特点
        2. 计算属性的 get 函数，不能有副作用
          1. 不能调用接口
          2. 不能去操作DOM
          3. 不能改变外部数据
        3. 计算属性是只读不允许修改
          1. 如果一定要改的话，可以写成对象写法之后，提供 set 函数
          2. 提供了也不能修改，只是不报错而已，如果要改一定是修改他的依赖项数据。
   -->

    <div id="app">
      <p>{{ msg }}</p>

      <p>{{ reverseMsg }}</p>

      <hr />

      <p>{{ fullName }}</p>
      <p>{{ fullName }}</p>
      <p>{{ fullName }}</p>
      <p>{{ fullName }}</p>

      <button v-on:click="fullName = '里斯'">修改 fullName </button>
    </div>

    <script src="../../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            msg: "hello",
            first: "张",
            last: "三",
          };
        },

        // 计算属性
        computed: {
          // 写法1，简写的 get 函数形式
          reverseMsg() {
            // 1. 必须有返回值，返回值的内容就是当前 reverseMsg 的值
            // 2. 使用到的其他数据就是当前 reverseMsg 这个计算属性的 依赖项

            return this.msg.split("").reverse().join("");
          },

          // 写法2，完整的 对象写法
          fullName: {
            // 取值
            get() {
              console.log("计算 fullName");
              return this.first + "" + this.last;
            },

            // 赋值
            //    this.fullName = '里斯'
            set(value) {
              console.log('value', value)

              // 可以间接的修改原始依赖项数据，来达成修改的目标
              const tmp = value.split('')
              this.first = tmp[0]
              this.last = tmp[1]
            }
          },
        },

        methods: {
          calcFullName() {
            console.log("方法 fullName");
            return this.first + "" + this.last;
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
